<template>
	<div class="catalogue" :style="{ marginLeft: marginLeft ? count * marginLeft + 'px' : count * 20 + 'px' }" @click="handleClick($event)">
		<div class="catalogue-title" v-for="item in catalogueList" :key="item.id">
			<span
				class="catalogue-title-text"
				:style="count === 0 ? h1Style : h2Style"
				:class="count === 0 ? 'h1-font' : 'h2-font'"
				:data-id="item.id"
				:title="item.title"
				>{{ item.title }}</span
			>
			<div class="catalogue-title-child" v-if="item.children.length > 0">
				<Catalogue :catalogueList="item.children" :h2Style="h2Style" :count="count + 1"></Catalogue>
			</div>
		</div>
	</div>
</template>

<script setup>
	const props = defineProps({
		catalogueList: {
			type: Array,
			default: () => [],
		},
		h1Style: {
			type: Object,
			default: () => ({}),
		},
		h2Style: {
			type: Object,
			default: () => ({}),
		},
		marginLeft: {
			type: Number,
			default: 0,
		},
		count: {
			type: Number,
			default: 0,
		},
	});
	const emits = defineEmits(['update:skip']);
	const handleClick = e => {
		const id = e.target.dataset.id;
		if (!id) {
			return;
		}
		emits('update:skip', id);
	};

	defineOptions({
		name: 'Catalogue',
	});
</script>

<style lang="scss" scoped>
	.catalogue {
		width: 320px;
		margin: 10px 0;
		.catalogue-title {
			@include text-overflow(1);
		}
		.catalogue-title-text {
			cursor: pointer;
			&:hover {
				color: var(--blog-box-bg-color-red) !important;
			}
		}
		.catalogue-title-child {
		}
	}
	.h1-font {
		@include font(_, 14px, 24px, 400, var(--blog-normal-text-color));
	}
	.h2-font {
		@include font(_, 14px, 24px, 400, #555555);
	}
</style>
